<!DOCTYPE html>
<html ng-app="demoApp">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>下拉树选择组件 - ng-components-ui</title>
    <link rel="stylesheet" href="../dist/ng-components.css" />
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        margin: 0;
        padding: 0;
        background: #f5f5f5;
      }

      .header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px 40px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .header h1 {
        margin: 0 0 10px 0;
        font-size: 32px;
      }

      .header p {
        margin: 0;
        opacity: 0.9;
        font-size: 16px;
      }

      .back-link {
        display: inline-block;
        margin-top: 15px;
        color: white;
        text-decoration: none;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        transition: background 0.2s;
      }

      .back-link:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px;
      }

      .demo-section {
        background: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 30px;
      }

      .demo-section h2 {
        margin: 0 0 20px 0;
        color: #333;
        font-size: 20px;
        border-bottom: 2px solid #667eea;
        padding-bottom: 10px;
      }

      .demo-section h3 {
        margin: 20px 0 15px 0;
        color: #555;
        font-size: 16px;
        font-weight: 600;
      }

      .demo-section p {
        color: #666;
        line-height: 1.6;
        margin: 0 0 15px 0;
      }

      .debug-output {
        background: #2d3748;
        color: #e2e8f0;
        padding: 20px;
        border-radius: 6px;
        margin-top: 20px;
        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
        font-size: 13px;
      }

      .debug-output strong {
        color: #90cdf4;
        display: block;
        margin-bottom: 10px;
      }

      .debug-output pre {
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
      }

      .tree-demo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 30px;
        margin-top: 20px;
      }

      .tree-demo-item {
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        padding: 20px;
        background: #fafafa;
      }

      .tree-demo-item h3 {
        margin: 0 0 15px 0;
        color: #667eea;
        font-size: 15px;
      }

      .code-block {
        background: #f7fafc;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        padding: 15px;
        margin: 10px 0;
        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
        font-size: 12px;
        overflow-x: auto;
      }

      .code-block code {
        color: #2d3748;
      }

      .feature-list {
        background: #f7fafc;
        border-left: 4px solid #667eea;
        padding: 15px 20px;
        margin: 20px 0;
      }

      .feature-list ul {
        margin: 0;
        padding-left: 20px;
      }

      .feature-list li {
        color: #4a5568;
        margin: 8px 0;
        line-height: 1.6;
      }
    </style>
  </head>
  <body ng-controller="DemoController">
    <div class="header">
      <h1>下拉树选择组件</h1>
      <p>带下拉功能的树形选择器</p>
      <a href="home.html" class="back-link">← 返回主页</a>
    </div>

    <div class="container">
      <div class="demo-section">
        <h2>下拉树选择组件</h2>

        <div class="feature-list">
          <strong>功能特性:</strong>
          <ul>
            <li>支持单选/多选模式</li>
            <li>支持搜索过滤节点</li>
            <li>支持级联选择</li>
            <li>支持父节点简化模式</li>
            <li>支持清空功能</li>
            <li>支持禁用状态</li>
            <li>多选模式下显示已选数量统计</li>
          </ul>
        </div>

        <div class="tree-demo-grid">
          <!-- Demo 1: 单选下拉树 -->
          <div class="tree-demo-item">
            <h3>1. 单选下拉树</h3>
            <p>选中后自动关闭下拉</p>
            <tree-select
              tree-data="treeData1"
              id="BpaId"
              label="cnName"
              multiple="false"
              cascade="false"
              ng-model="selectIds1"
              placeholder="请选择节点"
              clearable="true">
            </tree-select>
            <div class="debug-output">
              <strong>选中的节点:</strong>
              <pre>{{ selectIds1 | json }}</pre>
            </div>
          </div>

          <!-- Demo 2: 多选下拉树 -->
          <div class="tree-demo-item">
            <h3>2. 多选下拉树</h3>
            <p>支持多选,显示"已选 N 项"</p>
            <tree-select
              tree-data="treeData1"
              id="BpaId"
              label="cnName"
              multiple="true"
              cascade="false"
              ng-model="selectIds2"
              placeholder="请选择节点"
              clearable="true">
            </tree-select>
            <div class="debug-output">
              <strong>选中的节点:</strong>
              <pre>{{ selectIds2 | json }}</pre>
            </div>
          </div>

          <!-- Demo 3: 多选 + 级联 -->
          <div class="tree-demo-item">
            <h3>3. 多选 + 级联</h3>
            <p>选中父节点自动选中所有子节点</p>
            <tree-select
              tree-data="treeData2"
              id="BpaId"
              label="cnName"
              multiple="true"
              cascade="true"
              ng-model="selectIds3"
              placeholder="请选择部门"
              clearable="true">
            </tree-select>
            <div class="debug-output">
              <strong>选中的节点:</strong>
              <pre>{{ selectIds3 | json }}</pre>
            </div>
          </div>

          <!-- Demo 4: 级联 + 父节点简化 -->
          <div class="tree-demo-item">
            <h3>4. 级联 + 父节点简化</h3>
            <p>选中所有子节点时只返回父节点ID</p>
            <tree-select
              tree-data="treeData2"
              id="BpaId"
              label="cnName"
              multiple="true"
              cascade="true"
              cascade-return-parent-only="true"
              ng-model="selectIds4"
              placeholder="请选择部门"
              clearable="true">
            </tree-select>
            <div class="debug-output">
              <strong>选中的节点 (简化后):</strong>
              <pre>{{ selectIds4 | json }}</pre>
            </div>
          </div>

          <!-- Demo 5: 禁用状态 -->
          <div class="tree-demo-item">
            <h3>5. 禁用状态</h3>
            <p>禁用整个选择器</p>
            <tree-select
              tree-data="treeData1"
              id="BpaId"
              label="cnName"
              multiple="true"
              cascade="true"
              ng-model="selectIds5"
              placeholder="已禁用"
              disabled="true"
              clearable="true">
            </tree-select>
            <div class="debug-output">
              <strong>选中的节点:</strong>
              <pre>{{ selectIds5 | json }}</pre>
            </div>
          </div>

          <!-- Demo 6: 带初始值 -->
          <div class="tree-demo-item">
            <h3>6. 带初始值</h3>
            <p>组件加载时显示预设的选中值</p>
            <tree-select
              tree-data="treeData2"
              id="BpaId"
              label="cnName"
              multiple="true"
              cascade="true"
              ng-model="selectIds6"
              placeholder="请选择部门"
              clearable="true">
            </tree-select>
            <div class="debug-output">
              <strong>选中的节点:</strong>
              <pre>{{ selectIds6 | json }}</pre>
            </div>
          </div>

          <!-- Demo 7: 不级联多选 -->
          <div class="tree-demo-item">
            <h3>7. 不级联多选</h3>
            <p>多选模式，不级联子节点</p>
            <tree-select
              tree-data="treeData1"
              id="BpaId"
              label="cnName"
              multiple="true"
              cascade="false"
              ng-model="selectIds7"
              placeholder="请选择节点"
              clearable="true">
            </tree-select>
            <div class="debug-output">
              <strong>选中的节点:</strong>
              <pre>{{ selectIds7 | json }}</pre>
            </div>
          </div>

          <!-- Demo 8: 综合测试 - 初始值+级联+简化 -->
          <div class="tree-demo-item">
            <h3>8. 综合测试</h3>
            <p>初始值 + 级联 + 父节点简化</p>
            <tree-select
              tree-data="treeData2"
              id="BpaId"
              label="cnName"
              multiple="true"
              cascade="true"
              cascade-return-parent-only="true"
              ng-model="selectIds8"
              placeholder="请选择部门"
              clearable="true">
            </tree-select>
            <div class="debug-output">
              <strong>选中的节点 (简化后):</strong>
              <pre>{{ selectIds8 | json }}</pre>
              <div style="margin-top: 10px; padding: 8px; background: #f0f0f0; border-radius: 4px; font-size: 12px;">
                <strong>初始值说明:</strong> 预设选中"M1-1" (技术部)<br>
                <strong>期望行为:</strong><br>
                1. 加载时应显示 "已选 N 项" (技术部及其所有子部门)<br>
                2. 打开下拉时，技术部及其子节点应全部勾选<br>
                3. cascadeReturnParentOnly=true 时，返回 ["M1-1"]<br>
                4. 支持清空按钮
              </div>
              <div style="margin-top: 10px; padding: 8px; background: #e6f7ff; border-radius: 4px; font-size: 12px;">
                <strong>调试信息:</strong><br>
                <span>选中节点数量: {{ selectIds8.length }}</span><br>
                <span>数据加载状态: {{ treeData2 ? '已加载 (' + treeData2.length + ' 个根节点)' : '未加载' }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="code-block" style="margin-top: 30px;">
          <code>
// HTML 使用方式<br>
&lt;tree-select<br>
&nbsp;&nbsp;tree-data="treeData"<br>
&nbsp;&nbsp;id="BpaId"<br>
&nbsp;&nbsp;label="cnName"<br>
&nbsp;&nbsp;multiple="true"<br>
&nbsp;&nbsp;cascade="true"<br>
&nbsp;&nbsp;cascade-return-parent-only="false"<br>
&nbsp;&nbsp;ng-model="selectedIds"<br>
&nbsp;&nbsp;placeholder="请选择"<br>
&nbsp;&nbsp;clearable="true"&gt;<br>
&lt;/tree-select&gt;<br>
<br>
// Controller 中<br>
$scope.selectedIds = []; // 选中的节点ID数组
          </code>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/angular@1.8.3/angular.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/angular-strap@2.3.12/dist/angular-strap.min.js"></script>
    <script src="../dist/ng-components.js"></script>
    <script>
      angular
        .module("demoApp", ["ngComponents"])
        .controller("DemoController", function ($scope) {
          // Tree Demo Data 1
          $scope.treeData1 = [
            {
              BpaId: "1",
              cnName: "一级节点1",
              children: [
                {
                  BpaId: "1-1",
                  cnName: "二级节点1-1",
                  children: [
                    {
                      BpaId: "1-1-1",
                      cnName: "三级节点1-1-1",
                      children: []
                    }
                  ]
                },
                {
                  BpaId: "1-2",
                  cnName: "二级节点1-2",
                  children: []
                }
              ]
            },
            {
              BpaId: "2",
              cnName: "一级节点2",
              children: [
                {
                  BpaId: "2-1",
                  cnName: "二级节点2-1",
                  children: []
                }
              ]
            }
          ];

          // Tree Demo Data 2 - Complex Organization
          $scope.treeData2 = [
            {
              BpaId: "D1",
              cnName: "董事会",
              children: [
                {
                  BpaId: "D1-1",
                  cnName: "战略委员会",
                  children: [
                    { BpaId: "D1-1-A", cnName: "战略规划组", children: [] },
                    { BpaId: "D1-1-B", cnName: "投资决策组", children: [] }
                  ]
                },
                {
                  BpaId: "D1-2",
                  cnName: "审计委员会",
                  children: [
                    { BpaId: "D1-2-A", cnName: "内部审计组", children: [] },
                    { BpaId: "D1-2-B", cnName: "风险控制组", children: [] }
                  ]
                }
              ]
            },
            {
              BpaId: "M1",
              cnName: "管理层",
              children: [
                {
                  BpaId: "M1-1",
                  cnName: "技术部",
                  children: [
                    {
                      BpaId: "M1-1-A",
                      cnName: "研发团队",
                      children: [
                        { BpaId: "M1-1-A-1", cnName: "前端组", children: [] },
                        { BpaId: "M1-1-A-2", cnName: "后端组", children: [] },
                        { BpaId: "M1-1-A-3", cnName: "测试组", children: [] }
                      ]
                    },
                    { BpaId: "M1-1-B", cnName: "运维团队", children: [] }
                  ]
                },
                {
                  BpaId: "M1-2",
                  cnName: "市场部",
                  children: [
                    { BpaId: "M1-2-A", cnName: "营销团队", children: [] },
                    { BpaId: "M1-2-B", cnName: "品牌团队", children: [] }
                  ]
                },
                {
                  BpaId: "M1-3",
                  cnName: "人力资源部",
                  children: [
                    { BpaId: "M1-3-A", cnName: "招聘组", children: [] },
                    { BpaId: "M1-3-B", cnName: "培训组", children: [] }
                  ]
                }
              ]
            },
            {
              BpaId: "T1",
              cnName: "技术支持",
              children: [
                { BpaId: "T1-1", cnName: "客服团队", children: [] },
                { BpaId: "T1-2", cnName: "技术支持团队", children: [] }
              ]
            }
          ];

          // Initialize selected IDs for tree-select
          $scope.selectIds1 = [];
          $scope.selectIds2 = [];
          $scope.selectIds3 = [];
          $scope.selectIds4 = [];
          $scope.selectIds5 = ["1", "2"]; // 禁用状态的初始值
          $scope.selectIds6 = ["M1-1"]; // 带初始值示例
          $scope.selectIds7 = [];
          $scope.selectIds8 = ["M1-1"]; // 综合测试: 选中技术部(包含所有子部门)

          console.log("TreeSelect DemoController initialized");
        });
    </script>
  </body>
</html>
